<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('党员评价')" />
    <style>
        body {
            background: linear-gradient(135deg, #4b0000, #2b0000);
            color: #fff;
            font-family: 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 0;
            overflow: auto; /* 允许页面整体滚动 */
        }

        .dashboard-container {
            width: 100%;
            min-height: 100vh;
            padding: 20px;
            box-sizing: border-box;
        }

        .dashboard-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .dashboard-title {
            font-size: 2.5em;
            margin: 0;
            background: linear-gradient(to right, #ffd700, #ffa500);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
        }

        .dashboard-subtitle {
            font-size: 1.2em;
            color: #ffa5a5;
            margin-top: 10px;
        }

        .dashboard-content {
            display: flex;
            gap: 20px;
            min-height: calc(100vh - 120px);
        }

        .member-selector {
            flex: 1;
            background: rgba(100, 0, 0, 0.7);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 0 20px rgba(200, 0, 0, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(200, 50, 50, 0.8);
            display: flex;
            flex-direction: column;
        }

        .member-selector h2 {
            margin-top: 0;
            color: #ffcc00;
            border-bottom: 2px solid rgba(200, 50, 50, 0.8);
            padding-bottom: 10px;
        }

        .search-box {
            display: flex;
            margin-bottom: 20px;
        }

        .search-input {
            flex: 1;
            padding: 12px;
            border: 1px solid #ffcc00;
            border-radius: 8px 0 0 8px;
            background: rgba(50, 0, 0, 0.7);
            color: white;
            font-size: 1em;
        }

        .search-btn {
            padding: 12px 20px;
            background: linear-gradient(135deg, #ff3333, #cc0000);
            color: white;
            border: none;
            border-radius: 0 8px 8px 0;
            cursor: pointer;
            font-weight: bold;
        }

        .member-list {
            flex: 1;
            overflow-y: auto;
            max-height: 500px; /* 设置最大高度以启用滚动条 */
        }

        .member-item {
            padding: 15px;
            margin-bottom: 10px;
            background: rgba(80, 0, 0, 0.6);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid transparent;
        }

        .member-item:hover {
            background: rgba(120, 0, 0, 0.8);
            transform: translateX(5px);
            border: 1px solid #ffcc00;
        }

        .member-item.selected {
            background: rgba(150, 0, 0, 0.9);
            border: 1px solid #ffcc00;
            box-shadow: 0 0 15px rgba(255, 204, 0, 0.7);
        }

        .member-name {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .member-branch {
            font-size: 0.9em;
            color: #ff9999;
        }

        .member-stats {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            font-size: 0.9em;
        }

        .stat-item {
            text-align: center;
        }

        .stat-value {
            font-weight: bold;
            color: #ffcc00;
        }

        .overview-panel {
            flex: 2;
            background: rgba(100, 0, 0, 0.7);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 0 20px rgba(200, 0, 0, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(200, 50, 50, 0.8);
            display: flex;
            flex-direction: column;
        }

        .overview-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .member-profile {
            display: flex;
            align-items: center;
        }

        .profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff3333, #cc0000);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2em;
            font-weight: bold;
            margin-right: 20px;
        }

        .profile-info h2 {
            margin: 0 0 10px 0;
            color: #ffcc00;
        }

        .profile-detail {
            margin: 5px 0;
            font-size: 0.9em;
            color: #ffcccc;
        }

        .score-summary {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 20px;
        }

        .score-card {
            background: rgba(80, 0, 0, 0.6);
            border-radius: 10px;
            padding: 15px;
            text-align: center;
            border: 1px solid rgba(200, 50, 50, 0.8);
        }

        .score-title {
            font-size: 0.9em;
            color: #ff9999;
            margin-bottom: 10px;
        }

        .score-value {
            font-size: 2em;
            font-weight: bold;
            background: linear-gradient(to right, #ffcc00, #ff9900);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .charts-panel {
            flex: 2;
            background: rgba(100, 0, 0, 0.7);
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 0 20px rgba(200, 0, 0, 0.5);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(200, 50, 50, 0.8);
            margin-top: 20px;
        }

        .charts-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .charts-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            min-height: 400px; /* 设置最小高度以确保内容区域足够大 */
        }

        .chart-box {
            background: rgba(80, 0, 0, 0.6);
            border-radius: 10px;
            padding: 15px;
            border: 1px solid rgba(200, 50, 50, 0.8);
        }

        .chart-title {
            text-align: center;
            margin: 0 0 15px 0;
            color: #ffcc00;
            font-size: 1.1em;
        }

        .chart-placeholder {
            height: 300px; /* 固定图表占位符高度 */
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ff9999;
            font-style: italic;
        }

        /* 滚动条样式 */
        .member-list::-webkit-scrollbar {
            width: 8px;
        }

        .member-list::-webkit-scrollbar-track {
            background: rgba(50, 0, 0, 0.5);
        }

        .member-list::-webkit-scrollbar-thumb {
            background: #ff3333;
            border-radius: 4px;
        }

        .member-list::-webkit-scrollbar-thumb:hover {
            background: #ff6666;
        }

        /* 响应式设计 */
        @media (max-width: 1200px) {
            .dashboard-content {
                flex-direction: column;
            }

            .member-selector,
            .overview-panel {
                flex: none;
            }

            .charts-panel {
                margin-top: 20px;
            }
        }
        
        .loading {
            text-align: center;
            padding: 20px;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="dashboard-container">
    <div class="dashboard-header" style="display: none;">
        <h1 class="dashboard-title">党员学习动态大屏</h1>
        <p class="dashboard-subtitle">实时展示党员学习情况</p>
    </div>

    <div class="dashboard-content">
        <div class="member-selector">
            <h2>党员选择</h2>
            <div class="search-box">
                <input type="text" class="search-input" placeholder="搜索党员姓名..." id="searchInput">
                <button class="search-btn" onclick="searchMembers()"><i class="fa fa-search"></i></button>
            </div>
            <div class="member-list" id="memberList">
                <div class="loading">正在加载数据...</div>
            </div>
        </div>

        <div class="overview-panel">
            <div class="overview-header">
                <div class="member-profile">
                    <div class="profile-avatar"></div>
                    <div class="profile-info">
                        <h2></h2>
                        <div class="profile-detail"><i class="fa fa-building"></i> <span id="profileBranch"></span></div>
                        <div class="profile-detail"><i class="fa fa-calendar"></i> 入党时间：<span id="joinPartyDate"></span></div>
                        <div class="profile-detail"><i class="fa fa-star"></i> <span id="excellentMember"></span></div>
                    </div>
                </div>
                <div class="score-summary">
                    <div class="score-card">
                        <div class="score-title">学习总时长</div>
                        <div class="score-value" id="studyHours">0</div>
                        <div>小时</div>
                    </div>
                    <div class="score-card">
                        <div class="score-title">学习次数</div>
                        <div class="score-value" id="averageScore">0</div>
                        <div>次</div>
                    </div>
                </div>
            </div>
            <div class="charts-panel">
                <div class="charts-header">
                    <h2>学习情况与评价分析</h2>
                </div>
                <div class="charts-container">
                    <div class="chart-box">
                        <div class="chart-title">在线学习时长趋势</div>
                        <div class="chart-placeholder">
                            <div id="chart1" style="height: 300px; width: 100%;">在线学习时长趋势图</div>
                        </div>
                    </div>
                    <div class="chart-box">
                        <div class="chart-title">在线学习次数趋势</div>
                        <div class="chart-placeholder">
                            <div id="chart2" style="height: 300px; width: 100%;">在线学习次数趋势</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />

<script type="text/javascript">
    // 页面加载完成后初始化
    $(function() {
        // 获取党员数据
        loadMemberData();
        // 初始化图表
        updateChart();
        // 初始化图表
        renderLearningChart();
    });
    var members = null;
    
    // 加载党员数据
    function loadMemberData(name) {
        // 获取党员列表
        $.ajax({
            url: ctx+'system/partymember/member/list',
            data: {
                name: name
            },
            type: 'POST',
            dataType: 'json',
            success: function(response) {
                members = response.rows;
                
                // 获取部门信息
                $.ajax({
                    url: ctx+'system/dept/list',
                    type: 'POST',
                    dataType: 'json',
                    success: function(deptData) {
                        // 创建部门映射
                        const deptMap = {};
                        deptData.forEach(dept => {
                            deptMap[dept.deptId] = dept.deptName;
                        });
                        
                        // 渲染党员列表
                        renderMemberList(members, deptMap);
                        
                        // 默认加载第一个党员的详细信息
                        if (members.length > 0) {
                            loadMemberDetail(members[0].id, members[0], deptMap);
                            $('.member-item:first').addClass('selected');
                        }
                    },
                    error: function() {
                        $('#memberList').html('<div class="loading">数据加载失败</div>');
                    }
                });
            },
            error: function() {
                $('#memberList').html('<div class="loading">数据加载失败</div>');
            }
        });
    }
    
    // 渲染党员列表
    function renderMemberList(members, deptMap) {
        const memberList = $('#memberList');
        memberList.empty();
        
        members.forEach(member => {
            const deptName = deptMap[member.deptId] || '未知支部';
            const isExcellent = member.isExcellent === '1' ? '<span style="color: gold; float: right;">★ 优秀党员</span>' : '';

            // 学习时长
            var xxsc = Math.floor(Math.random() * 100) + 50;
            // 学习次数
            var xxcs = Math.floor(Math.random() * 100) + 20;
            member.xxsc = xxsc;
            member.xxcs = xxcs;
            const memberItem = $(`
                <div class="member-item" onclick="selectMember(this, '${member.id}')">
                    <div class="member-name">${member.name} ${isExcellent}</div>
                    <div class="member-branch">${deptName}</div>
                    <div class="member-stats">
                        <div class="stat-item">
                            <div class="stat-label">学习时长</div>
                            <div class="stat-value">${member.xxsc}小时</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-label">学习次数</div>
                            <div class="stat-value">${member.xxcs}次</div>
                        </div>
                    </div>
                </div>
            `);
            
            memberList.append(memberItem);
        });
    }

    // 选择党员
    function selectMember(element, memberId) {
        // 移除所有选中状态
        document.querySelectorAll('.member-item').forEach(item => {
            item.classList.remove('selected');
        });

        // 添加选中状态到当前元素
        element.classList.add('selected');

        // 获取选中党员的详细信息
        const selectedMember = members.find(member => member.id == memberId);
        if (selectedMember) {
            // 获取部门信息
            $.ajax({
                url: ctx+'system/dept/list',
                type: 'POST',
                dataType: 'json',
                success: function(deptData) {
                    // 创建部门映射
                    const deptMap = {};
                    deptData.forEach(dept => {
                        deptMap[dept.deptId] = dept.deptName;
                    });

                    // 加载党员详细信息
                    loadMemberDetail(memberId, selectedMember, deptMap);
                }
            });
        }
    }

    // 加载党员详细信息
    function loadMemberDetail(memberId, member, deptMap) {
        // 更新头像
        const avatar = member.name.charAt(0);
        $('.profile-avatar').text(avatar);
        
        // 更新姓名
        $('.profile-info h2').text(member.name);
        
        // 更新支部
        const deptName = deptMap[member.deptId] || '未知支部';
        $('#profileBranch').text(deptName);
        
        // 更新入党时间
        $('#joinPartyDate').text(member.joinPartyDate || '未知');
        
        // 更新优秀党员标识
        const isExcellent = member.isExcellent === '1' ? '优秀党员' : '普通党员';
        $('#excellentMember').text(isExcellent);
        
        // 更新统计数据（这里使用模拟数据，实际应用中应该从后台获取）
        $('#studyHours').text(member.xxsc);
        $('#averageScore').text(member.xxcs);

        // 初始化图表
        updateChart();
        // 初始化图表
        renderLearningChart();
    }

    // 搜索党员
    function searchMembers() {
        const keyword = document.getElementById('searchInput').value.trim();
        if (keyword) {
            loadMemberData(keyword);
        } else {
            loadMemberData();
        }
    }
</script>

<script>
    // 初始化图表
    const chartDom = document.getElementById('chart2');
    const myChart = echarts.init(chartDom);
    let option;

    // 生成30天的日期标签
    function generateDays() {
        const days = [];
        for (let i = 1; i <= 30; i++) {
            days.push(`${i}日`);
        }
        return days;
    }

    // 生成1-5之间的随机整数数组
    function generateRandomData(count) {
        return Array.from({length: count}, () => Math.floor(Math.random() * 5) + 1);
    }

    // 生成图表数据
    function generateChartData() {
        const days = generateDays();
        const studyCounts = generateRandomData(30);

        // 计算平均值
        const average = studyCounts.reduce((sum, val) => sum + val, 0) / studyCounts.length;

        return {
            days,
            studyCounts,
            average: average.toFixed(1)
        };
    }

    // 更新图表
    function updateChart() {
        const data = generateChartData();

        option = {
            backgroundColor: 'transparent',
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                borderColor: '#ddd',
                borderWidth: 1,
                textStyle: { color: '#333' },
                formatter: function(params) {
                    return `${params[0].name}: ${params[0].value} 次学习`;
                },
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: data.days,
                axisLine: {
                    lineStyle: {
                        color: '#e5e7eb'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 2, // 每隔2个标签显示一次，避免拥挤
                    color: '#6b7280'
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                min: 0,
                max: 6,
                interval: 1,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#6b7280',
                    formatter: '{value} 次'
                },
                splitLine: {
                    lineStyle: {
                        color: '#f3f4f6'
                    }
                }
            },
            series: [
                {
                    data: data.studyCounts,
                    type: 'bar', // 将折线图改为柱状图
                    name: '学习次数',
                    barWidth: '60%', // 柱子宽度
                    itemStyle: {
                        // 柱状图颜色渐变
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#ffcc00' },
                            { offset: 1, color: '#ffcc00' }
                        ]),
                        borderRadius: [4, 4, 0, 0] // 顶部圆角
                    },
                    // 添加平均值参考线
                    markLine: {
                        data: [
                            {
                                type: 'average',
                                name: '平均值',
                                label: {
                                    formatter: `平均值: ${data.average} 次`
                                },
                                lineStyle: {
                                    color: 'ff3333',
                                    type: 'dashed'
                                },
                                itemStyle: {
                                    color: 'ff3333'
                                }
                            }
                        ]
                    },
                    // 柱状图动画效果
                    animationDuration: 800
                }
            ],
            // 整体动画配置
            animation: true,
            animationEasing: 'cubicOut'
        };

        myChart.setOption(option);
    }

    // 响应窗口大小变化
    window.addEventListener('resize', function() {
        myChart.resize();
    });
</script>

<script>
    // 初始化图表相关对象
    const chartContainer = document.getElementById('chart1');
    const learningChart = echarts.init(chartContainer);
    let chartConfiguration;

    // 生成30天的日期标签
    function createDayLabels() {
        const dayLabels = [];
        for (let i = 1; i <= 30; i++) {
            dayLabels.push(`${i}日`);
        }
        return dayLabels;
    }

    // 生成3-5之间的随机整数数组（学习时长，单位：小时）
    function generateStudyHoursData(count) {
        // 3-5之间的随机整数：Math.floor(Math.random() * 3) + 3
        return Array.from({length: count}, () => Math.floor(Math.random() * 3) + 3);
    }

    // 生成完整的图表数据
    function prepareChartDataset() {
        const dayLabels = createDayLabels();
        const studyHours = generateStudyHoursData(30);

        // 计算平均值
        const averageHours = studyHours.reduce((sum, val) => sum + val, 0) / studyHours.length;

        return {
            dayLabels: dayLabels,
            studyHours: studyHours,
            averageHours: averageHours.toFixed(1)
        };
    }

    // 更新并渲染图表
    function renderLearningChart() {
        const dataset = prepareChartDataset();

        chartConfiguration = {
            backgroundColor: 'transparent',
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                borderColor: '#ddd',
                borderWidth: 1,
                textStyle: { color: '#333' },
                formatter: function(params) {
                    return `${params[0].name}: ${params[0].value} 小时`;
                },
                axisPointer: {
                    type: 'line',
                    lineStyle: {
                        color: 'rgba(59, 130, 246, 0.5)'
                    }
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: dataset.dayLabels,
                axisLine: {
                    lineStyle: {
                        color: '#e5e7eb'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 2, // 每隔2个标签显示一次，避免拥挤
                    color: '#6b7280'
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                min: 2,  // 最小值设为2，让数据更居中展示
                max: 6,  // 最大值设为6，留出适当空间
                interval: 1,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#6b7280',
                    formatter: '{value} 小时'
                },
                splitLine: {
                    lineStyle: {
                        color: '#f3f4f6'
                    }
                }
            },
            series: [
                {
                    data: dataset.studyHours,
                    type: 'line',
                    name: '学习时长',
                    symbol: 'circle',
                    symbolSize: 8,
                    emphasis: {
                        symbolSize: 10
                    },
                    lineStyle: {
                        width: 3,
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            { offset: 0, color: '#ffcc00' },
                            { offset: 1, color: '#ffcc00' }
                        ])
                    },
                    itemStyle: {
                        color: '#3b82f6',
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(59, 130, 246, 0.3)' },
                            { offset: 1, color: 'rgba(59, 130, 246, 0)' }
                        ])
                    },
                    markLine: {
                        data: [
                            {
                                type: 'average',
                                name: '平均时长',
                                label: {
                                    formatter: `平均时长: ${dataset.averageHours} 小时`
                                },
                                lineStyle: {
                                    color: 'ff3333',
                                    type: 'dashed'
                                },
                                itemStyle: {
                                    color: 'ff3333'
                                }
                            }
                        ]
                    }
                }
            ],
            animation: true,
            animationDuration: 1000,
            animationEasing: 'cubicOut'
        };

        learningChart.setOption(chartConfiguration);
    }

    // 响应窗口大小变化
    window.addEventListener('resize', function() {
        learningChart.resize();
    });
</script>
</body>
</html>